<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>工具栏</title>
<link href="../../css/bootstrap3.min.css" rel="stylesheet">
<link href="../../css/font-awesome.css" rel="stylesheet"> 
<link href="../../css/koala.css" rel="stylesheet">
<script src="../../js/jquery.js" type="text/javascript"></script>
<script src="../../lib/Koala_Button.js" type="text/javascript"></script>
<script src="../../lib/Koala_ToolBar.js" type="text/javascript"></script>
<script type="text/javascript">
var datas = [
	{"id":"btn-ok","icon":"ok","style":"success","title":"确认"},
	{"id":"btn-cancel","icon":"ban-circle","style":"success","title":"取消"},
	null,
	{"id":"btn-bold","icon":"bold","style":"info","title":"加粗"},
	{"id":"btn-italic","icon":"italic","style":"info","title":"倾斜"},
	{"id":"btn-font","icon":"font","style":"info","title":"字体"},
	null,
	{"id":"btn-left","icon":"align-left","style":"success","title":""},
	{"id":"btn-center","icon":"align-center","style":"success","title":""},
	{"id":"btn-right","icon":"align-right","style":"success","title":""},
];

var newDatas = [
	{"id":"btn-time","icon":"time","style":"warning","title":"查看时间"},  
	null,
	{"id":"btn-play","icon":"play","style":"info","title":"播放"},
	{"id":"btn-pause","icon":"pause","style":"info","title":"暂停"},
];

$(function(){
	$("#myToolBar").toolbar({
		datas:datas
	});
	
	$("#myToolBar").data("koala.toolbar").addTool(newDatas);
	
	$("#btn-play").click(function(){
		console.info("play");
	})
})
</script>
</head>
<body>
<div class="container" id="myToolBar">

</div>	
</body>
</html>